<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./style.css">
	<style>

	</style>
</head>

<body>
	<div id="app">
		<div class="line">
			<img v-if="hero.image.head" class="image _header"
				:src="`../../../reso/2dec/res/image/ui/07_head/07_pic_${hero.image.head}.png`" />
			<div class="inline name">{{hero.name}}</div>
			<div class="inline nick">—— {{hero.nick}}</div>
		</div>
		<div class="line wp2">
			<div class="_title">● 角色定位</div>
			<div class="position">- 最高强度 : {{dicts.pos[hero.pos[3]]}}
				<img v-if="hero.pos[3]" class="inline image _heat"
					:src="`../../../reso/2dec/res/image/ui/06_hero/${dicts.heat[hero.pos[3] - 5]}.png`" />
			</div>
			<div class="position">- 攻击距离 : {{dicts.pos[hero.pos[1]]}} ( {{hero.attr.range}} )</div>
			<div class="position">- 战斗特点 : {{dicts.pos[hero.pos[2]]}}</div>
		</div>
		<div class="line">
			<div class="_title">● 英雄技能</div>
			<div>
				<template v-for="skill of hero.skills">
					<div class="skillBox">
						<div class="skill _head">
							<img class="image _skill" :src="`../../../reso/2dec/${skill.image}`" />
							<div class="inline _name">{{skill.name}}</div>
						</div>
						<div class="skill _desc" v-html="skill.desc"></div>
					</div>
				</template>
			</div>
		</div>
		<div class="line">
			<div class="_title">● 组合技能</div>

			<table v-if="hero.combos" class="comboBox">
				<tr>
					<th>组合名</th>
					<th>描述</th>
					<th>主技能</th>
					<th>组合技1</th>
					<th>组合技2</th>
				</tr>
				<template v-for="skillMain of hero.combos">
					<template v-for="(combo, cid) of skillMain.combos">
						<tr>
							<td style="text-align: center">{{combo.name}}</td>
							<td style="text-align: center">{{combo.effect}}</td>
							<td v-if="cid == 0" :rowspan="skillMain.combos.length">
								<img class="image _skill" :src="`../../../reso/2dec/${skillMain.image}`" />
								<div class="inline skillMainName">{{skillMain.name}}</div>
							</td>
							<td v-for="skill of combo.skills" :key="skill.id" class="skillBox2">
								<template v-if="!skill.empty">
									<img class="image _skill" :src="`../../../reso/2dec/${skill.image}`" />
									<div class="inline skillNameBox">
										<div class="_skillName">{{skill.name}}</div>
										<div class="_skillName">
											<img class="image _headerSkill"
												:src="`../../../reso/2dec/res/image/ui/07_head/07_pic_${skill.heroHead}.png`" />
											<div class="inline heroName">{{skill.heroName}}</div>
										</div>
									</div>
								</template>
								<template v-else>
									无
								</template>
							</td>
						</tr>
					</template>
				</template>
			</table>
		</div>
		<div class="line">
			<div class="_title">● 专属符文</div>
		</div>
		<div class="line">
			<div class="_title">● 专属戒指</div>
		</div>
		<div class="line">
			<div class="_title">● 刻印特技</div>
		</div>
		<div class="line">
			<div class="_title">● 基础属性</div>
		</div>
		<div class="line">
			<div class="_title">● 个人传记</div>
		</div>
		<div class="line">
			<div class="_title">● 互动语音</div>
		</div>
	</div>
</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="./hero.js"></script>
<script src="./main.js"></script>

</html>